<template>
  <section class="classify">
    <cube-slide ref="slide" :auto-play="false" :data="classify.classifyList" @change="changePage">
      <cube-slide-item
        class="swiper_img"
        v-for="(item, index) in classify.classifyList"
        :key="index"
        @click.native="clickHandler(item, index)">
        <ul class="silde_list">
          <router-link
            tag="li"
            :to="'/footer/home/classifycontent/' + list.id"
            v-for="(list, index) of item"
            :key="index"
            @click="classifyClick(index)"
          >
            <div class="silde_list_box">
               <img :src="list.imgUrl"/>
               <p>{{list.label}}</p>
            </div>
          </router-link>
        </ul>
      </cube-slide-item>
    </cube-slide>
  </section>
</template>

<script>
export default {
  name: 'Classify',
  props: ['classify'],
  methods: {
    changePage (current) {
      console.log('当前轮播图序号为:' + current)
    },
    clickHandler (item, index) {
      console.log(item, index)
    },
    classifyClick (id) {
      alert(id)
    }
  }

}
</script>

<style lang="stylus" scoped>
  .classify
    background #fff
    width 100%
  .classify >>> .cube-slide-dots
    bottom 4px
    span
      width 5px
      height 5px
      border-radius 50%
      background rgba(0,0,0,.2)
      margin-left 3px
    span.active
      width 10px
      border-radius 40%
      background #e93b3d
  .silde_list
    display flex
    box-sizing border-box
    justify-content space-around
    flex-direction row
    flex-wrap wrap
    align-content stretch
    text-align center
    li
      width 20%
      .silde_list_box
        margin-bottom 17px
        img
          width 40px
          margin-bottom 5px
        p
          color #000000
          font-size 11px

</style>
